<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mb-16" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form
          ref="formValidate"
          :model="formValidate"
          label-width="75px"
          label-position="right"
          inline
          @submit.native.prevent
        >
          <el-form-item label="时间选择：">
            <el-date-picker
              clearable
              v-model="timeVal"
              type="daterange"
              :editable="false"
              @change="onchangeTime"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="width: 250px"
              class="mr20"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="提现状态：">
            <el-select
              clearable
              v-model="formValidate.status"
              placeholder="请选择状态"
              @change="selChange"
              class="form_content_width"
            >
              <el-option
                v-for="(item, index) in treeData.withdrawal"
                :key="index"
                :value="item.value"
                :label="item.title"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现方式：">
            <el-select
              clearable
              v-model="formValidate.extractType"
              placeholder="请选择状态"
              @change="selChange"
              class="form_content_width"
            >
              <el-option
                v-for="(item, index) in treeData.payment"
                :key="index"
                :value="item.value"
                :label="item.title"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索：">
            <el-input
              clearable
              placeholder="微信昵称/姓名/支付宝账号/银行卡号"
              v-model="formValidate.nireid"
              class="form_content_width"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-db-click @click="selChange">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <cards-data :cardLists="cardLists" v-if="extractStatistics"></cards-data>
    <el-card :bordered="false" shadow="never">
      <el-row type="flex" justify="space-between" class="mt10">
        <el-col :span="24" style="display: flex;">
          <el-button type="primary" style="margin-bottom: 10px" @click="openAdd(0)">提交审核</el-button>
        </el-col>
      </el-row>
      <el-table ref="table" :data="tabList" v-loading="loading" empty-text="暂无数据" class="mt14">
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="提现金额" min-width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.extractPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column label="提现方式" min-width="130">
          <template slot-scope="scope">
            <div class="type" v-if="scope.row.extractType === 'bank'">
              <div class="item">姓名:{{ scope.row.realName }}</div>
              <div class="item">银行卡号:{{ scope.row.bankCode }}</div>
              <div class="item">银行开户地址:{{ scope.row.bankAddress }}</div>
            </div>
            <div class="type" v-if="scope.row.extractType === 'wx'">
              <div class="item">昵称:{{ scope.row.realName }}</div>
              <div class="item">微信号:{{ scope.row.wechat }}</div>
            </div>
            <div class="type" v-if="scope.row.extractType === 'alipay'">
              <div class="item">姓名:{{ scope.row.realName }}</div>
              <div class="item">支付宝号:{{ scope.row.alipayCode }}</div>
            </div>
            <div class="type" v-if="scope.row.extractType === 'balance'">
              <div class="item">姓名:{{ scope.row.realName }}</div>
              <div class="item">提现方式：佣金转入余额</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收款码" min-width="90">
          <template slot-scope="scope">
            <div
              class="tabBox_img"
              v-viewer
              v-if="scope.row.extractType === 'wx' || scope.row.extractType === 'alipay'"
            >
              <img v-lazy="scope.row.qrcodeUrl" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" min-width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.addTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.mark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="130">
          <template slot-scope="scope">
            <div class="status" v-if="scope.row.status === 0">
              <div class="statusVal">申请中</div>
              <div></div>
            </div>
            <div class="statusVal" v-if="scope.row.status === 1">提现通过</div>
            <div class="statusVal" v-if="scope.row.status === -1">
              提现未通过
              <br />
              未通过原因：{{ scope.row.failMsg }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="formValidate.page"
          :limit.sync="formValidate.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="modals"
      scrollable
      closable
      title="提交申请"
      footer-hide
      :mask-closable="false"
      :z-index="900"
    >
      <edit-form
        ref="edits"
        :id="extractId"
        :rest="extractStatistics.restIncome"
        @submitSuccess="submitSuccess"
        v-if="modals"
      ></edit-form>
    </el-dialog>
  </div>
</template>
  <script>
import { getAgentIncomeInfo, getAgentExtractListApi } from '@/api/agent';
import cardsData from './handle/cards';
import editForm from './handle/form.vue';

export default {
  components: { cardsData, editForm },
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
  },
  data() {
    return {
      images: ['1.jpg', '2.jpg'],
      modal_loading: false,
      failMsg: {
        message: '输入信息不完整或有误!',
      },
      modals: false,
      total: 0,
      cardLists: [],
      loading: false,
      tabList: [],
      pickerOptions: this.$timeOptions,
      treeData: {
        withdrawal: [
          {
            title: '全部',
            value: '',
          },
          {
            title: '未通过',
            value: -1,
          },
          {
            title: '申请中',
            value: 0,
          },
          {
            title: '已通过',
            value: 1,
          },
        ],
        payment: [
          {
            title: '全部',
            value: '',
          },
          {
            title: '微信',
            value: 'wx',
          },
          {
            title: '支付宝',
            value: 'alipay',
          },
          {
            title: '银行卡',
            value: 'bank',
          },
        ],
      },
      formValidate: {
        status: '',
        extractType: '',
        nireid: '',
        data: '',
        page: 1,
        limit: 20,
      },
      extractStatistics: {},
      timeVal: [],
      FromData: null,
      extractId: 0,
    };
  },
  watch: {
    // $route() {
    //   if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
    //     this.getPath();
    //   }
    // },
  },
  created() {
    this.getInfo();
  },
  mounted() {
    this.$nextTick(function () {
      this.getList();
    });
  },
  methods: {
    //提交成功
    submitSuccess() {
      this.modals = false;
      this.formValidate.page = 1;
      this.getList();
    },
    getPath() {
      this.formValidate.page = 1;
      this.formValidate.status = parseInt(this.$route.query.status);
      this.getList();
    },
    // 无效
    openAdd(row) {
      this.extractId = row.id;
      this.modals = true;
    },

    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.data = this.timeVal ? this.timeVal.join('-') : '';
      this.formValidate.page = 1;
      this.getList();
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.page = 1;
      this.formValidate.data = tab;
      this.timeVal = [];
      this.getList();
    },
    // 选择
    selChange() {
      this.formValidate.page = 1;
      this.getList();
    },
    getInfo() {
      getAgentIncomeInfo().then((res) => {
        this.extractStatistics = res.extract;

        this.cardLists = [
          {
            col: 6,
            count: this.extractStatistics.totalIncome,
            name: '佣金总金额',
            className: 'el-icon-s-cooperation',
          },
          { col: 6, count: this.extractStatistics.checkingIncome, name: '待提现金额', className: 'el-icon-s-ticket' },
          { col: 6, count: this.extractStatistics.extractedIncome, name: '已提现金额', className: 'el-icon-s-finance' },
          {
            col: 6,
            count: this.extractStatistics.restIncome,
            name: '未提现金额',
            className: 'iconshangpiel-icon-s-shopntuikuanjine',
          },
        ];
      });
    },
    // 列表
    getList() {
      this.loading = true;
      getAgentExtractListApi(this.formValidate)
        .then(async (res) => {
          let data = res;
          console.log(res)
          this.tabList = data.list.list;
          this.total = data.list.toal;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
  },
};
</script>
  <style scoped lang="stylus">
  .ivu-mt .type .item {
    margin: 3px 0;
  }

  .tabform {
    margin-bottom: 10px;
  }

  .Refresh {
    font-size: 12px;
    color: var(--prev-color-primary);
    cursor: pointer;
  }

  .ivu-form-item {
    margin-bottom: 10px;
  }

  .status ::v-deep .item~.item {
    margin-left: 6px;
  }

  .status ::v-deep .statusVal {
    margin-bottom: 7px;
  }

  /* .ivu-mt ::v-deep .ivu-table-header */
  /* border-top:1px dashed #ddd!important */
  .type {
    padding: 3px 0;
    box-sizing: border-box;
  }

  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
  